<template>
  <h1>App</h1>
</template>

<script lang="ts">
/*
  计算属性和监视属性：vue2和vue3用法一致
    1. 计算属性：
      只读计算属性
        computed: {
          xxx() {}
        }

      可读可写计算属性
        computed: {
          xxx: {
            get() {},
            set() {}
          }
        }

      特点：有缓存
    
    2. 监视属性
      基本用法
        watch: {
          xxx(newVal, oldVal) {}
        }
      其他用法
        watch: {
          xxx: {
            handler(newVal, oldVal) {},
            immediate: true, // 立即监视（第一次生效，一上来就触发）
            deep: true, // 深度监视
          }
        }
    
    计算属性和监视属性的区别：
      1. 计算属性有缓存，监视属性没有
      2. 计算属性不能进行异步操作，监视属性可以进行异步操作
      3. 计算属性一定返回值，监视属性没有
*/

export default {
  name: 'App',
};
</script>

<style scoped></style>
